<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/blockChian.css" rel="stylesheet">

<style>
	.chaxun div {
		height: 3rem;
	}
	
	table.mainList {
		border-top-style: solid;
		border-top-width: 1px;
		border-top-color: white;
	}
	table.mainList,table.mainList td,table.mainList tr {
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: white;
	}
	table.mainList {
		width: 100%;
		text-align: center;
		vertical-align: middle;
		margin-bottom: 5rem;
		table-layout: fixed;
	}
	table.mainList {
		width: 100%;
		text-align: center;
		vertical-align: middle;
	}
	table.mainList td.gameId {
		word-break: break-all;
	}
	table.mainList td .playerId {
		font-size: 1.5rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 0.5rem;
		margin-top: 0.5rem;
	}
	
	table.mainList td tail {
		position: relative;
		left: 45%;
		top: -2rem;
	}
	
	table.mainList img {
		width: 30px;
		height: 30px;
	}
	
	table.ApplyGameHtml tr {
		height: 3rem;
	}
	
	table.mainList .listTemp {
		/*height: 5rem;*/
	}
	
	table.mainList .status {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 0.5rem;
		margin-top: 0.5rem;
		text-align: right;
		margin-right: 1rem;
	}
	
	table.mainList .status_OFFLINE {
		color: blue;
		font-size: 10px;
	}
	
	table.mainList .status_ONLINE {
		color: yellow;
		font-size: 10px;
	}
</style>

<div id="mainView" class="row ">

	<script id="art-listTemplate" type="text/html">
		{{each data value index}}
		<tr class="listTemp">
			<td class="gameId colorId_{{value.gameId}}">
				<div class="playerId" ondblclick="MainView.list.doubleClickCopy(this);">{{value.gameId}}</div>

			</td>
			<td>{{value.stake/1000000000000000000 }}</td>
			<td>{{value.stateStr}}</td>
			<td>
				<div class=" status status_{{value.status1}}">{{value.status1}} </div>

				<div class="status status_{{value.status2}}">
					{{if value.state > 1 && value.player2 !="0x0000000000000000000000000000000000000000"}} {{value.status2}} {{else}} &nbsp;&nbsp;&nbsp;&nbsp; {{/if}}
				</div>
			</td>

			<td>
				<div class="playerId player1  colorId_{{value.player1}}" ondblclick="MainView.list.doubleClickCopy(this,'玩家1的id');">{{value.player1}}</div>{{if value.state > 1 && value.player2 !="0x0000000000000000000000000000000000000000"}}
				<div class="playerId player2 colorId_{{value.player2}}" ondblclick="MainView.list.doubleClickCopy(this,'玩家2的id');">{{value.player2}}</div>
				{{else}}
				<div class="playerId ">
					--
				</div>
				{{/if}}
			</td>

			<td style="text-align: left;">
				<div class=' playerImg'>
					{{if value.choice1 != 0}}
					<img src="images/{{value.choice1}}_icon.png" /> {{else}} <img src="images/{{value.choice1}}_icon.png" /> {{/if}}
				</div>

				<div class=" playerImg">
					{{if value.choice2 != 0 && value.player2 !="0x0000000000000000000000000000000000000000"}}
					<img src="images/{{value.choice2}}_icon.png" alt='--' /> {{else}}
					<img src="images/{{value.choice1}}_icon.png" alt='--' /> {{/if}}
				</div>
			</td>
			
			<td>
				<div style="margin-bottom: 0.5rem;margin-top: 0.5rem;">
				{{if value.fund1 != null}}
					{{value.fund1/1000000000000000000}}
				{{else}}
					--
				{{/if}}</div>
				<div style="margin-bottom: 0.5rem;margin-top: 0.5rem;">
				{{if value.fund2 != null}}
					{{value.fund2/1000000000000000000}}
				{{else}}
					--
				{{/if}}
				</div>
			</td>
			
			<td>
				{{if value.state >= 4 && value.player2 != "0x0000000000000000000000000000000000000000"}} {{if value.winner == 0}} 平局 {{else if value.winner == 1}} 玩家1 {{else}} 玩家2 {{/if}} {{else}} -- {{/if}}
			</td>

			<td>
				{{value.createTime | timestamp | dateFormat 'MM/dd hh:mm:ss'}}
			</td>
			<td>
				{{if value.state > 1 && value.biddingStartTime != null}} {{value.biddingStartTime | timestamp | dateFormat 'MM/dd hh:mm:ss'}} {{else if value.player1 != value.account && value.status1 != "OFFLINE" && value.state == "1"}}
				<div class="btn btn-default " onclick="MainView.list.challenge({{index}})">挑战</div>
				{{else}} -- {{/if}}
			</td>

			<td>
				{{if value.state == 1 && value.player1 == value.account}}
				<div class="btn btn-default " onclick="MainView.list.destroy({{index}})">撤销</div>
				{{else if value.state != "5" && value.state != 1 && (value.player1 == value.account || value.player2 == value.account) && (value.timeout1 == 1||value.timeout2 == 1) }}
				<div class="btn btn-default " onclick="MainView.list.jiesuan({{index}})">结算</div>
				{{else if value.state == "5" && value.settledTime != null}} {{value.settledTime | timestamp | dateFormat 'MM/dd hh:mm:ss'}} {{else}} -- {{/if}}
			</td>

		</tr>
		{{/each}}
	</script>
	<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>

	<div class="container col-xs-10 col-sm-10 col-md-10 col-lg-10 " style="z-index: 2;">
		<div class="row">
			<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
				<h1 class="text-center">以太坊唯一区块链【终端分歧机】<tip style="font-size: 1.5rem; font-style: italic;color: red;">Ropsten测试版</tip></h1>
				<h2 class="text-center">安全可靠，无懈可击&nbsp;&nbsp;<a href="" style="font-size: 1.5rem; font-style: italic;color: red;text-decoration: underline;" onclick="window.open('http://faucet.ropsten.be:3001/','_blank','')">获取测试ETH</a></h2>
				<hr/>
				<br/>
			</div>
		</div>
		<br />
		<div class="text-center  bc_flex_end_center" style="margin-bottom: 2rem;">
			<div style="flex-basis: 80px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
			<div class=" btn btn-default" id="createBtn">创建我的终端机</div>&nbsp;&nbsp;&nbsp;&nbsp;
			<a style="text-decoration: underline;cursor: pointer;" onclick="window.open('http://10fenke.com/rps/src/how.html','_blank','')">如何玩</a>
		</div>

		<div class="row text-center">
			<div class="col-md-3 col-lg-3 col-xs-1 col-sm-1">&nbsp;</div>
			<div class="col-md-6 col-lg-6  col-xs-10 col-sm-10">
				<div class="form-group">
					<div class="input-group">
						<input id="searchValue" style="text-align: center;" type="text" class="form-control" placeholder="输入以太坊账号或GameId查询">
						<div class="input-group-addon btn btn-default"><img src="images/search.png" style="width: 20px;" id="searchBtn" /></div>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-lg-3  col-xs-1 col-sm-1">&nbsp;</div>
		</div>

		<br />

		<table class="mainList">
			<tr class="headerTr" style="height: 3rem;">
				<td>游戏ID</td>
				<td width="80px">投注(ETH)</td>
				<td width="80px">状态</td>
				<td width="70px">&nbsp;</td>
				<td>玩家1/玩家2</td>
				<td width="60px">&nbsp;</td>
				<td width="80px">返回资金(ETH)</td>	
				<td width="80px">赢家</td>
				<td width="80px">创建时间</td>
				<td width="80px">开始时间</td>
				<td width="80px">结算时间</td>
			</tr>
		</table>

	</div>
</div>
<div class="col-xs-1 col-sm-1  col-md-1 col-lg-1"></div>

<script src="js/tool/art-template.js"></script>
<script src="js/bc/main.js"></script>
<script src="js/bc/MainView/create.js"></script>
<script src="js/bc/MainView/list.js"></script>
</div>